<template>
    <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="isShowPrint" :mask-closable="false"
        placement="bottom" @cancel="closePopHandler">
        <template #title>
            <a-row style="width:100%;justify-content: space-between;box-sizing: border-box;">
                <a-col flex="300px"> 打印 </a-col>
            </a-row>
        </template>
        <div class="search-form" style="margin-top: 16px">
            <a-form size="small" :model="searchData" auto-label-width>
                <a-row :gutter="20">
                    <a-col :xxl="4" :xl="6" :lg="12" :md="12" :xs="24">
                        <a-form-item label="流转卡号">
                            <a-input class="aInput" allow-clear v-model="searchData.circulatCard" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="6" :lg="12" :md="12" :xs="24">
                        <a-form-item label="客户名称">
                            <a-input class="aInput" allow-clear v-model="searchData.customName" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="6" :lg="12" :md="12" :xs="24">
                        <a-form-item label="客户订单号">
                            <a-input class="aInput" allow-clear v-model="searchData.customOrderNo" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="6" :lg="12" :md="12" :xs="24">
                        <a-form-item label="色号">
                            <a-input class="aInput" allow-clear v-model="searchData.colorCode" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="6" :lg="12" :md="12" :xs="24">
                        <a-form-item label="色称">
                            <a-input class="aInput" allow-clear v-model="searchData.colorName" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="20">
                    <a-col :xxl="4" :xl="6" :lg="12" :md="12" :xs="24">
                        <a-form-item label="布号">
                            <a-input class="aInput" allow-clear v-model="searchData.clothCode" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="6" :lg="12" :md="12" :xs="24">
                        <a-form-item label="品名">
                            <a-input class="aInput" allow-clear v-model="searchData.brandName" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="6" :lg="12" :md="12" :xs="24">
                        <a-form-item label="最终买家">
                            <a-input class="aInput" allow-clear v-model="searchData.ultimatelyBuyer" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="6" :lg="12" :md="12" :xs="24">
                        <a-form-item label="测试标准">
                            <a-input class="aInput" allow-clear v-model="searchData.verifyStandard" />
                        </a-form-item>
                    </a-col>
                    <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
                        <a-form-item label="备注">
                            <a-input class="aInput" allow-clear v-model="searchData.remark" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <a-table size="small" :columns="labelColumns" :rowKey="rowKey" :data="table.dataList" style="width: 600px;"
                :pagination="false">
                <!-- selectOptions -->
                <template #selectOptions="{ record, rowIndex }">
                    <a-checkbox @change="selectChange($event, record, rowIndex)" />
                </template>
            </a-table>
        </div>
        <template #footer>
            <a-button size="mini" @click="closePopHandler">
                关闭
            </a-button>
            <a-button type="primary" size="mini" @click="selectHandler">
                查询
            </a-button>
            <a-button type="primary" status="warning" size="mini" @click="printLabelHandler(1)">
                打印物测标签
            </a-button>
            <a-button type="primary" status="warning" size="mini" @click="printLabelHandler(2)">
                打印小标签
            </a-button>
            <!-- <a-button type="primary" status="warning" size="mini" @click="exportHandler">
                导出
            </a-button> -->
        </template>
    </a-drawer>
    <a-modal v-model:visible="printData.isToPrint" :width="printData.printStatus == 1 ? '600px' : '400px'">
        <template #title>{{ printData.printTitle }}</template>
        <template v-if="printData.printStatus == 1">
            <div id="printCont">
                <div style="text-align: center;">
                    <qrcode :size="150" :value="printData.printBigLable.circulatCard"></qrcode>
                </div>
                <div class="setItemBox">
                    <div class="setItem">缸号：<div class="setText">{{ printData.printBigLable.circulatCard }}</div>
                    </div>
                    <div class="setItem">最终买家：<div class="setText">{{ printData.printBigLable.ultimatelyBuyer }}</div>
                    </div>
                </div>
                <div class="setItemBox">
                    <div class="setItem">色称：<div class="setText">{{ printData.printBigLable.colorName }}</div>
                    </div>
                    <div class="setItem">合约号：<div class="setText"></div>
                    </div>
                </div>
                <div class="setItemBox">
                    <div class="setItem">客订单号：<div class="setText">{{ printData.printBigLable.customOrderCode }}</div>
                    </div>
                    <div class="setItem">打印日期：<div class="setText">{{ printData.printBigLable.printDate }}</div>
                    </div>
                </div>
                <div style="border-bottom: 1px solid #000; padding-bottom: 3px;height: 30px;margin-top: 10px;"> 布号: {{ printData.printBigLable.clothCode }}</div>
                <div style="border-bottom: 1px solid #000; padding-bottom: 3px;height: 30px;margin-top: 10px;"> 品名: {{ printData.printBigLable.brandName }}</div>
                <div style="border-bottom: 1px solid #000; padding-bottom: 3px;height: 30px;margin-top: 10px;"> 缩水要求: {{ printData.printBigLable.shrinkRequire }}</div>
                <div style="border-bottom: 1px solid #000; padding-bottom: 3px;height: 30px;margin-top: 10px;"> 测试标准: {{ printData.printBigLable.verifyStandard }}
                </div>
                <div class="setItemBox">
                    <div class="setItem">布种类型：<div class="setText">{{ printData.printBigLable.clothKingType }}</div>
                    </div>
                    <div class="setItem">抗酚黄变处理：<div class="setText">{{ printData.printBigLable.yellowTreatment }}</div>
                    </div>
                </div>
                <div class="setItemBox">
                    <div class="setItem">撞白：<div class="setText"></div>
                    </div>
                    <div class="setItem">刷毛：<div class="setText">{{ printData.printBigLable.bristle }}</div>
                    </div>
                </div>
                <div class="setItemBox">
                    <div class="setItem">烧毛：<div class="setText">{{ printData.printBigLable.singe }}</div>
                    </div>
                    <div class="setItem">抗黄处理：<div class="setText">{{ printData.printBigLable.phenolYellowTreatment }}</div>
                    </div>
                </div>
                <div class="setItemBox">
                    <div class="setItem">蚀毛：<div class="setText">{{ printData.printBigLable.cavition }}</div>
                    </div>
                </div>
                <div v-for="item in printData.printList" :key="item.verifyMethod" style="display: flex;justify-content: space-between;line-height: 22px;">
                    <div> {{ item.verifyProject }}</div>
                    <div> {{ item.verifyMethod }} </div>
                </div>
                <div class="setItemBox">
                    <div class="setItem">备注：</div>
                </div>
            </div>
        </template>
        <template v-if="printData.printStatus == 2">
            <template style="border:1px solid #000; padding: 3px;margin-bottom: 20px;"
                v-for="(item, index) in printData.printSamllList">
                <div :id="`printCont${index}`">
                    <div style="text-align: center;">
                        <qrcode :size="150" :value="item.circulatCard"></qrcode>
                    </div>
                    <div style="border-bottom: 1px solid #000; padding-bottom: 3px;"> 缸型: {{ item.circulatCard }} </div>
                    <div style="border-bottom: 1px solid #000; padding-bottom: 3px;"> 色称: {{ item.colorName }} </div>
                    <div style="border-bottom: 1px solid #000; padding-bottom: 3px;"> 布号: {{ item.clothCode }} </div>
                    <div style="border-bottom: 1px solid #000; padding-bottom: 3px;"> 品名: {{ item.brandName }} </div>
                    <div style="border-bottom: 1px solid #000; padding-bottom: 3px;"> 测试标准: {{ item.verifyStandard }} </div>
                    <div style="border-bottom: 1px solid #000; padding-bottom: 3px;"> 测试项目: {{ item.verifyProject }} </div>
                    <div style="border-bottom: 1px solid #000; padding-bottom: 3px;"> 测试方法: {{ item.verifyMethod }} </div>
                    <div style="border-bottom: 1px solid #000; padding-bottom: 3px;"> 日期： {{ item.printDate }} </div>
                </div>
                <div style="text-align: center; margin: 20px 0px;">
                    <a-button @click="allVPrintClick(`printCont${index}`)" style="margin-left: 20px;"
                        type="primary">打印</a-button>
                </div>
            </template>
        </template>
        <template #footer>
            <div style="text-align: center;" v-if="printData.printStatus == 1">
                <a-button @click="printData.isToPrint = false">关闭</a-button>
                <a-button @click="vPrintClick" style="margin-left: 20px;" type="primary">打印</a-button>
            </div>
            <div style="text-align: center;" v-if="printData.printStatus == 2">
                <a-button @click="printData.isToPrint = false">关闭</a-button>
            </div>
        </template>
    </a-modal>
</template>
<script lang="ts">
import { ref, reactive, watch } from 'vue'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table'
import { verifyManage } from '@/api/PhysicalSurveyRoom/physicalTestApi'
import printJS from 'print-js'
import { Message } from '@arco-design/web-vue'
import qrcode from 'qrcode.vue'
import dayjs from 'dayjs';
export default {
    name: 'phyManageList',
    components: { qrcode },
    props: {
        isShowPrint: {
            type: Boolean,
            default: false,
            require: true
        },
        labelData: {
            type: Object,
            defalt: () => { },
        }
    },
    setup(props, { emit }) {
        const printData = reactive<{
            printTitle:string,
            isToPrint:boolean,
            printSamllList:any[],
            phyData:any,
            printBigLable:any,
            printStatus:number,
            printList:any[],
        }>({
            printTitle:'',
            isToPrint:false,
            printSamllList:[],
            printBigLable:{},
            phyData:{},
            printList:[],
            printStatus:1,
        })
        const verifyManageApi = verifyManage();
        const searchData = reactive<{
            clothCode: string;
            customName: string;
            customOrderNo: string;
            colorCode: string;
            colorName: string;
            brandName: string;
            verifyStandard: string;
            circulatCard: string,
            remark: string,
            ultimatelyBuyer:string,
        }>({
            clothCode: '',
            customName: '',
            customOrderNo: '',
            colorCode: '',
            colorName: '',
            brandName: '',
            verifyStandard: '',
            circulatCard: '',
            remark: '',
            ultimatelyBuyer:''
        });

        watch(props, (val: any) => {
            let { labelData } = val;
            for (let key in searchData) {
                searchData[key] = labelData[key];
            };
            printData.phyData = labelData;
            if (val.isShowPrint) {
                selectHandler();

            }
        })

        const selectHandler = async () => {
            let res = await verifyManage().getPrintPhy({ ...searchData });
            if (res.code === 200) {
                table.handleSuccess(res.data);
                printData.printList = [];
            } else {
                Message.error('数据查询失败');
            }
        };
        const printLabelHandler = async (status: number) => {
            printData.printSamllList = [];
            if (printData.printList.length > 0) {
                if (status === 1) {
                    printData.printTitle = "物测标签打印";
                    let res: any = await verifyManageApi.printPhyLabel({ id: printData.phyData.id });
                    if (res.code === 200) {
                        printData.printBigLable= res.data[0];
                        printData.printBigLable.printDate = dayjs(printData.printBigLable.printDate).format('YYYY-MM-DD hh:mm:ss');
                        printData.isToPrint = true;
                    } else {
                        Message.error(res.message);
                    }

                } else {
                    printData.printTitle = "小标签打印";
                    let res: any = await verifyManageApi.printSamllLabel({ id: printData.phyData.id });
                    if (res.code === 200) {
                        let data = res.data[0];
                        printData.printSamllList = printData.printList.map(v => {
                            let printDate = dayjs(v.printDate).format('YYYY-MM-DD hh:mm:ss');
                            return {
                                ...data,
                                ...v,
                                printDate
                            }
                        });
                        printData.isToPrint= true;
                    } else {
                        Message.error(res.message);
                    }
                }
                printData.printStatus = status;
            } else {
                Message.error("请选择需要打印的列表数据");
            }

        };
        const selectChange = (status: any, data: any, rowIndex: number) => {
            if (status) {
                printData.printList.push({ index: rowIndex, verifyProject: data.verifyProject, verifyMethod: data.verifyMethod });
            } else {
                printData.printList = printData.printList.filter(v => v.index !== rowIndex);
            };
        }
        const exportHandler = () => {
            // let selectList = gridOption.value.getSelectedRows();
            // if (selectList.length === 0) {
            //     Message.error('请勾选需要导出的数据')
            //     return 
            // } else {
            //     let nowRow = table.dataList.filter(function (o) {
            //         return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
            //     })
            //     assTable(cfsValue,nowRow,'');
            // }
        };
        const closePopHandler = () => {
            emit('toClosePrint')
        };
        const doRefresh = () => { };
        const pagination = usePagination(doRefresh);
        const { selectedRowKeys } = useRowSelection()
        const table = useTable()
        const rowKey = useRowKey('id');
        const labelColumns = useTableColumn([
            {
                title: '序号',
                key: 'serialNo',
                dataIndex: 'serialNo',
                width: 100,
            },
            {
                title: '面料测试项目',
                key: 'verifyProject',
                dataIndex: 'verifyProject',
                width: 150,
            },
            {
                title: '测试方法',
                key: 'verifyMethod',
                dataIndex: 'verifyMethod',
                width: 150,
            },
            {
                title: '选择',
                key: 'id',
                dataIndex: 'id',
                width: 150,
                slotName: "selectOptions",
            }
        ]);


        //打印
        const allVPrintClick = (printable: any) => {
            printJS({
                printable,
                type: 'html',
                targetStyles: ['*'],
            })
        }
        const vPrintClick = () => {
            printJS({
                printable: 'printCont',
                type: 'html',
                targetStyles: ['*'],
            })
        }
        return {
            selectHandler,
            printLabelHandler,
            exportHandler,
            closePopHandler,
            searchData,
            pagination,
            selectedRowKeys,
            table,
            rowKey,
            labelColumns,
            selectChange,
            vPrintClick,
            allVPrintClick,
            printData
        }
    },
}
</script> 
<style lang="less" scoped>.aInput {
    width: 270px;
    background: #fff;
    border: 1px solid #c9cdd3;
}

.setItemBox{
    display: flex;
    justify-content:space-between;
    align-items: center;
    .setItem{
        display: flex;
        align-items: center;
        margin-top: 10px;
        .setText{
            margin-left: 10px;
            border-bottom: 1px solid #000;
            width: 180px;
            height: 30px;
        }
    }
}
</style>